<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			width: 800px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between
		}
		ul li{
			list-style: none;
			display: flex;
			flex-direction: column;
			width: 120px;
			height: 150px;
		}
		span{
			display: inline-block;
			width: 120px;
			height: 20px;
			text-align: center;
			line-height: 20px;
		}
	</style>
</head>
<body>
<div>
	<ul>
	
	</ul>
</div>
<script type="text/javascript" src="./ajax.js"></script>
<script type="text/javascript">
	let ul = document.querySelector('ul')
	let img = document.querySelectorAll('img')
	function render() {
		ajax({
			method:'get',
			url:'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js',
			params:{
				v:58
			},
			success:function(res) {
				console.log(res.hero)			
				for(let i = 0;i < res.hero.length;i++){
					ul.innerHTML += `
						<li>
							<img onclick = 'content(${res.hero[i].heroId})' src="https://game.gtimg.cn/images/lol/act/img/champion/${res.hero[i].alias}.png ">
							<span>${res.hero[i].name}</span>
						</li>
					`
				}
			}
		})
	}
	render()
	function content(val) {
		ajax({
			method:'getOther',
			url:'https://game.gtimg.cn/images/lol/act/img/js/hero',
			params:{
				id:`${val}.js?ts=2734602`
			},
			success:function(res) {
				console.log(res)
				localStorage.setItem('res',JSON.stringify(res))
				location.href = './练习6-跳转页面.html'
			}
		})
	}
</script>
</body>
</html>